<template>
	<view class="container">
		<view class="bgWrite">
			<view class="title">问题类型:</view>
			<view class="nav-bar">
				<view v-for="(item, index) in list" :key="index" class="nav-item"
					:class="{current:item.id==category_id}" @click="opt_menu(item.id)">
					<view class="menu_name" style="display:felx;">
							<text class="tit">{{ item.title }}</text>
							<text class="name">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bgWrite">
			<view class="title"><text class="color01">*</text>反馈描述</view>
			<uv-textarea placeholder="说说您的建议或问题，以便我们提供更好的服务" v-model="memo" count></uv-textarea>
		</view>
		<view class="bgWrite">
			<view class="title"><text class="color01">*</text>图片（最多6张图，最大10M）</view>
			<UploadImg ref="upload"></UploadImg>
			<button class="blueBtn" @click="submit">提交</button>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import UploadImg from '@/components/UploadImg.vue'
	import route from '@/utils/route';
	import { toast, imgUrl } from '@/utils/fun';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { http, apiPath } from '@/common/http/index';
	onLoad(() => {
		get_info()
	});
	const [list, category_id, memo, upload, imgs, loading] = [ref(), ref(), ref(), ref(), ref(), ref(false)]
	//获取类型
	const opt_menu = (id) => {
		category_id.value = id;//切换 
	}
	const get_info = async () => {
		list.value = (await http.get('/api/v1/message/type')).data.data;//获取左侧菜单
	}
	const submit = (e) => {
		imgs.value = upload.value.get_imgs();
		console.log("看看图片的路径",imgs.value)
		let params = {
			message: memo.value,
			type: category_id.value,
			images: imgs.value
		}
		http.post(`/api/v1/message`, params, { custom: { loading: true } })
			.then((res : any) => {
				setTimeout(() => {
					toast('反馈成功！');
					uni.navigateBack()
					loading.value = false;
				}, 2000);
			})
			.catch((err) => {
				setTimeout(() => {
					loading.value = false;
				}, 1500);
			});
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(248, 249, 251, 1);
	}
   .tit{
	   font-weight: bold;
	   font-size: 28rpx;
	   color: #1D2541;
	   margin-top:10rpx;
	   line-height: 80rpx;
   }
   .name{
	   font-weight: 500;
	   font-size: 22rpx;
	   color: #7C8191;
	   padding-bottom:30rpx;

   }
	.container {
		padding-bottom: 50rpx;
	}

	.nav-bar {
		padding: 10px 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		border-radius: 10px;

		.current {
			background: #fff !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 4rpx solid #31C0ED;
			.tit{
				   font-weight: bold;
				   font-size: 28rpx;
				   color: #31C0ED !important;
				   margin-top:10rpx;
				   line-height: 80rpx;
			}
			.name{
				   font-weight: 500;
				   font-size: 22rpx;
				   color: #31C0ED;
				   padding-bottom:30rpx;
			
			}
		}

		.menu_name {
			text-algin: center;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;
		}

		.nav-item {
			background: #F7F8FA;
			margin-top: 20rpx;
			width: 48%;
			border-radius: 15rpx;
			// height: 80px;
			background: rgba(250, 250, 250, 1);
			
		}

	}

	.bgWrite {
		margin: 30rpx 0 30rpx;
		background: #fff;
		// border-radius: 15rpx;
		padding: 30rpx 30rpx 25rpx;
	}

	.title {
		margin-bottom: 20rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}

	.color01 {
		color: #ff0000;
	}

	.uv-page__tag-item {
		margin-right: 20px;
	}

	.blueBtn {
		margin: 45rpx auto 0;
		font-size: 26rpx;
		color: #fff;
		width: 560rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 20rpx;
		background: rgba(49, 192, 237, 1);
	}

	::v-deep .blueBtn:after {
		border: none;
		border-radius: 99rpx !important;
	}

	::v-deep .radio-custom {
		/* margin-left: 0; */
		margin: 0 10rpx 25rpx;
		padding: 25rpx 0 0 70rpx;
		border-radius: 16rpx;
		background: rgba(247, 248, 250, 1);
		width: 325rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.radioTxt01 {
		display: block;
		font-size: 28rpx;
		/* color: rgba(49, 192, 237, 1); */
		color: rgba(29, 37, 65, 1);
		height: 100rpx;
		padding-top: 20rpx;
		margin-left: 0;
		margin-bottom: 45rpx;
	}

	.radioTxt02 {
		display: block;
		font-size: 22rpx;
		/* color: rgba(49, 192, 237, 1); */
		color: rgba(124, 129, 145, 1);
		margin-left: -170rpx;
	}


	/* radio 边框颜色 */
	::v-deep .radio-custom .uni-radio-input {
		width: 0rpx;
		height: 0rpx;
		border: none;
		transform: rotateZ(360deg);
		background-color: rgba(255, 255, 255, 0) !important;
		margin-right: 0rpx !important;
	}

	/* radio 选中后的边框颜色 */
	::v-deep .radio-custom .uni-radio-input-checked {
		border: 0rpx solid #CACFFF !important;
		transform: rotateZ(360deg);
		background-color: #fff !important;
		display: flex;
		align-items: center;
		justify-content: center;
		/* display: none; */
	}

	/* radio 选中后的图标样式*/
	::v-deep .radio-custom .uni-radio-input.uni-radio-input-checked::before {
		left: 70rpx;
		top: -10rpx;
		display: block;
		content: "" !important;
		width: 430rpx !important;
		height: 240rpx !important;
		text-align: center;
		background: none !important;
		border: 2px solid rgba(49, 192, 237, 1);


	}
</style>